<template>
	<view class="content">
		<view class="inner">
			<u--form labelPosition="top" :model="form" ref="uForm">
				<u-form-item label="姓名" prop="dataForm.truename" required="true">
					<u--input v-model="form.dataForm.truename" border="none" clearable placeholder="请输入姓名"
						customStyle='background:#eee' placeholderStyle="background:#eee;color:#bbb"></u--input>
				</u-form-item>

				<u-form-item label="身份证号" prop="dataForm.idcard" required="true">
					<u--input v-model="form.dataForm.idcard" border="none" clearable placeholder="请输入身份证号"
						customStyle='background:#eee' placeholderStyle="background:#eee;color:#bbb"></u--input>
				</u-form-item>

				<u-form-item label="性别" prop="dataForm.gender" labelPosition="left" required="true">
					<u-radio-group v-model="form.dataForm.gender">
						<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in gender" :key="index"
							:label="item.name" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="出生生日" prop="dataForm.birthday" required="true">
					<view class="input_view" @click="show_birthday = true">{{form.dataForm.birthday}}</view>
					<u-picker :show="show_birthday" :columns="columns_birthday" :defaultIndex="[40,0,0]" keyName="label"
						@cancel="show_birthday = false" @confirm="confirm_birthday"></u-picker>
				</u-form-item>

				<u-form-item label="手机号码" prop="dataForm.phone" required="true">
					<u--input v-model="form.dataForm.phone" border="none" clearable placeholder="请输入手机号码"
						customStyle='background:#eee' placeholderStyle="background:#eee;color:#bbb"></u--input>
				</u-form-item>

				<u-form-item label="服装尺码" prop="dataForm.sizes" required="true">
					<view class="input_view" @click="show_sizes = true">{{form.dataForm.sizes}}</view>
					<u-picker :show="show_sizes" :columns="columns_sizes" keyName="label" @cancel="show_sizes = false"
						@confirm="confirm_sizes"></u-picker>
				</u-form-item>

				<u-form-item label="紧急联系人" prop="dataForm.contact_name" required="true">
					<u--input v-model="form.dataForm.contact_name" border="none" clearable placeholder="请输入紧急联系人"
						customStyle='background:#eee' placeholderStyle="background:#eee;color:#bbb"></u--input>
				</u-form-item>

				<u-form-item label="紧急联系人手机号" prop="dataForm.contact_phone" required="true">
					<u--input v-model="form.dataForm.contact_phone" border="none" clearable placeholder="请输入紧急联系人手机号"
						customStyle='background:#eee' placeholderStyle="background:#eee;color:#bbb"></u--input>
				</u-form-item>

				<view style="display: flex;">
					<u-checkbox-group @change="agree">
						<u-checkbox :customStyle="{marginBottom: '8px'}" name="item" checked="" label="本人已阅读并同意以上声明">
						</u-checkbox>
					</u-checkbox-group>
				</view>

			</u--form>
		</view>

		<view class="sign">
			<view class="sign_inner">
				<u-button color="#00B5C3" text="提交" :disabled=disabled @click="gotopage"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				game_id: "",
				show_sizes: false,
				show_birthday: false,
				columns_birthday: [
					['1950', '1951', '1952', '1953', '1954', '1955', '1956', '1957', '1958', '1959',
						'1960', '1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969',
						'1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979',
						'1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989',
						'1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999',
						'2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009',
						'2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'
					],
					['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
					['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16',
						'17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31',
					]
				],
				columns_sizes: [
					['XS', 'S', 'M', 'L', 'XL', '2XL', '3XL']
				],
				//birthday: Number(new Date('1990-01-01')),
				form: {
					dataForm: {
						truename: '',
						idcard: '',
						gender: 1,
						birthday: '',
						phone: '',
						sizes: '',
						contact_name: '',
						contact_phone: ''
					}
				},
				gender: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					}
				],
				rules: {
					'dataForm.idcard': {
						type: 'number',
						required: true,
						message: '请填写身份证',
						trigger: ['blur', 'change']
					},
					// 'dataForm.birthday': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择生日',
					// 	trigger: ['blur', 'change', 'focus', 'click']
					// },
					'dataForm.phone': {
						type: 'number',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					// 'dataForm.sizes': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择衣服尺寸',
					// 	trigger: ['blur', 'change']
					// },
					'dataForm.contact_name': {
						type: 'string',
						required: true,
						message: '请填写紧急联系人姓名',
						trigger: ['blur', 'change']
					},
					'dataForm.contact_phone': {
						type: 'number',
						required: true,
						message: '请填写紧急联系人手机号',
						trigger: ['blur', 'change']
					},
					'dataForm.truename': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							//调用uView自带的js验证规则，详见https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						//触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}]
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.game_id = options.game_id
		},
		methods: {
			//文本框点击隐藏键盘
			// hideKeyboard() {
			// 	uni.hideKeyboard()
			// },

			gotopage() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
						// lawApi.case_create(
						// 		this.form.dataForm
						// 	)
						// 	.then(result => {
						// 		uni.$u.toast('填写完成去支付')
						// 		uni.navigateTo({
						// 			url: '/pages/index/pay?game_id=' + this.game_id
						// 		})
						// 	})
						.catch(() => console.log("catch"))
				}).catch(errors => {
					uni.$u.toast('请填写完整')
				})

				uni.navigateTo({
					url: '/pages/subpages/index/pay?game_id=' + this.game_id
				})
			},

			confirm_birthday(e) {
				this.form.dataForm.birthday = e.value[0] + "-" + e.value[1] + "-" + e.value[2]
				this.show_birthday = false
			},
			confirm_sizes(e) {
				this.form.dataForm.sizes = e.value[0]
				this.show_sizes = false
			},
			agree(n) {
				if (n == false) {
					this.disabled = true
				} else {
					this.disabled = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 96%;
		margin: 0 2%;
	}

	h2 {
		text-align: center;
		font-size: 14px;
		margin: 20px 0;
	}

	.input_view {
		background: #eee;
		line-height: 36px;
		height: 36px;
		padding-left: 10px;
		font-size: 15px;
		color: #bbb;
	}

	.sign {
		position: fixed;
		bottom: 0px;
		background-color: #fff;
		width: 96%;
		z-index: 99;
	}

	.sign_inner {
		width: 100%;
		margin: 0 0% 10px 0%;
	}

	.inner {
		padding: 0 0px 80px 0px;
	}

	.pop_wra {
		padding-top: 14px;

		span {
			background-color: #eee;
			color: #333;
			margin: 10px 0 10px 15px;
			padding: 5px 10px;
			display: inline-block;
			font-size: 14px;
		}

		.category_cur {
			background-color: #2666FC10;
			color: #2666FC;
		}
	}

	.pop_wra h2 {
		text-align: center;
		margin-bottom: 20px;
	}

	.input_style {
		background: #f00;
		color: #2666FC;
	}
</style>
